<!-- 速贴订单页面 -->
<template>
    <div class="content">
        <el-row class="filter_btn">
            <el-col :span="16">
                <el-col :span="2" class="title hpx-label">
                    订单列表
                </el-col>
                <el-radio-group v-model="orderStatus" size="medium" @change="changeStatus()">
                    <el-radio-button v-for="item in orderOptions" :label="item.key" :key="item.key">{{item.label}}<MarkRemind :tipsNum="getFBillTips(item)" class="bid_tips"/></el-radio-button>
                </el-radio-group>
            </el-col>
            <el-col :span="6" :offset="2" class="delete">
                <el-button type="danger" size="mini" @click="remove()" :disabled="sectionArr.length == 0 && isSelect"><i class="iconfont icon-shanchu"></i> 删除</el-button>
                <el-button type="text" v-if="isSelect" @click="cancelCheck">取消</el-button>
            </el-col>
        </el-row>
        <template>
                   <!-- @remove="click_delete" -->
            <Table :tableData="tableData"
                   :isSelect="isSelect"
                   @selection="selection"
                   @change="changePage"
                   @changes="changeSize"
                   :tableName="'discountOrder'"
                   class="discountOrder">
                   >
                <template slot-scope="{scope}" class="operationBtn">
                    <el-button type="primary" size="small" @click="$router.push(`/discount/order/detail/${scope.row.id}`)" v-if="scope.row.status == 4 || scope.row.status == 5">
                        提票
                    </el-button>
                    <el-button type="primary" plain size="small" v-if="scope.row.status == 9">
                        重新提票
                    </el-button>
                    <el-button type="text" size="small" @click="$router.push(`/discount/order/detail/${scope.row.id}`)" v-if="scope.row.status != 4 && scope.row.status != 5">
                        <i class="iconfont icon-xiangqing2"></i> 详情
                    </el-button>
                </template>
            </Table>
        </template>

        <!-- 删除富民订单弹窗 -->
        <DialogInput ref="Fdelete" title="提醒">
            <div class="rem-dialog-con">
                <el-row class="warning hpx-red-tips"><i class="iconfont icon-tishi"></i></el-row>
                <el-row>是否删除已选择的{{sectionArr.length}}个订单?</el-row>
            </div>
            <span slot="Remfooter">
                <el-button @click="closeDialog()" type="info" class="hpx-cancel-color dialog-button">否</el-button>
                <el-button @click="confirmDeleteF()" type="primary" class="dialog-button">是</el-button>
            </span>
        </DialogInput>
        <!-- 富民订单删除成功弹窗 -->
        <DialogInput ref="FDeleteSuccess" title="提醒">
            <div class="rem-dialog-con">
                <el-row class="hpx-success"><i class="iconfont icon-wancheng"></i></el-row>
                <el-row>已成功删除订单</el-row>
            </div>
            <span slot="Remfooter">
                <el-button @click="closeDialog()" type="primary" class="dialog-button">我知道了</el-button>
            </span>
        </DialogInput>
    </div>
</template>

<script lang="ts">
    import {Vue, Component} from 'vue-property-decorator';
    import Table from '@component/common/HpxTable.vue';
    import DialogInput from '@component/common/DialogInput.vue';
    import moment from 'moment';
    import { mapState, mapMutations, mapGetters, mapActions } from 'vuex'
    import MarkRemind from '@component/common/MarkRemind.vue';
    import calc from 'calculatorjs'
    @Component({
        components: {
            Table,
            DialogInput,
            MarkRemind
        },
        computed: {
            ...mapState({
                allTips: 'allTips'
            })
        }
    })
    export default class Order extends Vue {
        getFBillTips (item) {
            switch (item.key) {
                case '1':
                    return this.allTips.fbankOrderCount
            }
        }
        orderStatus:string = ''
        isSelect:boolean = false
        sectionArr = []
        orderOptions = [{
            label: '全部订单',
            key: ''
        },{
            label: '待提票',
            key: '1'
        },{
            label: '交易完成',
            key: '6'
        },{
            label: '交易关闭',
            key: '8'
        }]
        tableData:TableData = {
            header:[
                {
                    label: '订单号',
                    key: 'orderNumber'
                },
                {
                    label: '发起时间',
                    key: 'createTime',
                    formatter: row => moment(row.createTime).format('MM-DD HH:mm')
                },
                {
                    label: '承兑人',
                    key: 'acceptor'
                },
                {
                    label: '票面金额(万)',
                    key: 'billPrice',
                    formatter: (row:any) => calc.div(row.billPrice,10000)
                },
                {
                    label: '到期时间',
                    key: 'dueDate',
                    formatter: row => moment(row.dueDate).format('YYYY-MM-DD')
                },
                {
                    label: '利率',
                    key: 'billRate'
                },
                {
                    label: '每十万扣',
                    key: 'everyOneHunderdThousandPlus'
                },
                {
                    label: '订单状态',
                    key: 'statusName'
                }
            ],
            body: [],
            footer: {
                total: 100,
                pageSize: 10,
                currentPage: 1,
            }
        }
        //获取速贴所有订单
        async getFOrders () {
            let params = {
                tradeStatus: this.orderStatus,
                n: this.tableData.footer.pageSize,
                p: this.tableData.footer.currentPage
            }
            let res = await this.$http.get('fbank/trade/orderList',{params})
            if(res.status == 200){
                if(res.data != null){
                    this.tableData.body = res.data.listName;
                    this.tableData.footer.total = res.data.page_info.items_number;
                    this.tableData.footer.pageSize = res.data.page_info.items_per_page;
                }else {
                    this.tableData.body = [];
                    this.tableData.footer.total = 0;
                    this.tableData.footer.pageSize = 10;
                }
            }
        }
        //取消勾选
        cancelCheck () {
            this.isSelect = false
        }
        //勾选
        selection (item) {
            this.sectionArr = item;
        }
        //删除
        // click_delete () {
        //     this.$refs['Fdelete'].openDialog();
        // }
        // 确定删除
        async confirmDeleteF () {
            this.$refs['Fdelete'].closeDialog();
            let willDelete = this.sectionArr.map(item => item.id)
            let res = await this.$http.delete(`fbank/trade/delete/${willDelete.join(',')}`)
            if(res.status == 200){
                this.getFOrders();
                this.$refs['FDeleteSuccess'].openDialog();
                this.isSelect = false
            }
        }
        closeDialog () {
            this.$refs['Fdelete'].closeDialog();
            this.$refs['FDeleteSuccess'].closeDialog();
        }
        //显示/隐藏勾选框
        remove () {
            this.isSelect ? this.$refs['Fdelete'].openDialog() : this.isSelect = true
        }
        // 订单状态切换
        changeStatus () {
            this.tableData.footer.currentPage = 1
            this.getFOrders();
        }
        //分页回调
        changePage (page:number) {
            this.tableData.footer.currentPage = page
            this.getFOrders()
        }
        changeSize (size:number) {
            this.tableData.footer.pageSize = size
            this.getFOrders()
        }
        mounted () {
            this.getFOrders();
        }
    }
</script>

<style lang="scss">
    .discountOrder{
        .el-table .cell{
            padding: 10px 10px;
        }
    }
</style>